<template>
  <div class="box">
    <!--搜索区域-->
    <div class="search">
      <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
        <el-form-item label="账号">
          <el-input v-model="searchForm.searchParams.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="searchForm.searchParams.deptId" placeholder="部门">
            <el-option v-for="(dept,index) in deptList" :label="dept.deptName" :value="dept.id"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.searchParams.state" placeholder="状态">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="正常" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--新增  批量删除-->
    <div class="batch">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="showAddDialog">新增</el-button>
      <el-button type="danger" size="small" icon="el-icon-delete" @click="batchDelete">批量删除</el-button>
    </div>
    <!--表格数据-->
    <div class="table-data">
      <el-table
          :data="tableData"
          stripe
          @selection-change="handleSelectionChange"
          style="width: 100%">
        <el-table-column
            fixed="left"
            type="selection"
            width="50">
        </el-table-column>
        <el-table-column
            prop="username"
            width="120"
            label="用户名">
        </el-table-column>
        <el-table-column
            prop="nickName"
            width="120"
            label="昵称">
        </el-table-column>
        <el-table-column
            label="性别">
          <template v-slot="scope">
            <span v-if="scope.row.sex==1">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column
            show-overflow-tooltip
            prop="city"
            width="120"
            label="城市">
        </el-table-column>
        <el-table-column
            prop="tel"
            width="150"
            label="联系方式">
        </el-table-column>
        <el-table-column
            width="80"
            prop="deptName"
            label="部门">
        </el-table-column>
        <el-table-column
            width="120"
            label="角色">
          <template v-slot="scope">
            <span v-text="scope.row.roleNames.join('/')"></span>
          </template>
        </el-table-column>
        <el-table-column
            label="状态">
          <template v-slot="scope">
            <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                @change="changeStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            width="180"
            label="创建时间">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="250">
          <template v-slot="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                size="mini"
                type="warning"
                @click="resetPassword(scope.$index, scope.row)">重置密码
            </el-button>
            <el-popconfirm
                title="确认删除当前行数据吗"
                @confirm="handleDelete(scope.$index, scope.row)"
                v-if="scope.row.id!==4">
              <el-button  type="danger" size="mini" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <!--分页区域-->
    <div class="page-nav">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="pageSizes"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--弹出层区域-->
    <div>
      <el-dialog :visible.sync="dialogFormVisible" :title="title" @close="clear" width="35%">
        <el-form :model="form" ref="formRef" :rules="rules">
          <el-form-item label="账号" :label-width="formLabelWidth" prop="username">
            <el-input v-model="form.username" autocomplete="off" :readonly="title=='编辑'"></el-input>
          </el-form-item>
          <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickName">
            <el-input v-model="form.nickName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市" :label-width="formLabelWidth" prop="city">
            <el-input v-model="form.city" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="部门" :label-width="formLabelWidth" prop="deptId">
            <el-select v-model="form.deptId" placeholder="请选择部门" style="width: 100%">
              <el-option v-for="(dept,index) in deptList" :label="dept.deptName" :value="dept.id"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式" :label-width="formLabelWidth" prop="tel">
            <el-input v-model="form.tel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item v-if="form.id!==4" label="角色" :label-width="formLabelWidth" prop="roleId">
            <el-select  v-model="form.roleId" placeholder="请选择角色" :multiple="true" style="width: 100%">
              <el-option v-for="(role,index) in roleList" :label="role.roleCh" :value="role.roleId"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible=false">取 消</el-button>
          <el-button type="primary" @click="addOrEditUser">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>

import {addUser, changeUserStatus, deleteUser, editUser, editUserPassword, userPage} from "@/api/user";
import {deptlist} from "@/api/dept";
import {Message} from "element-ui";
import {roleList} from "@/api/role";

export default {
  name: "UserView",
  data() {
    return {
      formLabelWidth: '70px',
      form: {
        id: '',
        username: '',
        nickName: '',
        sex: '',
        tel: '',
        city: '',
        deptId: '',
        roleId: ''
      },
      dialogFormVisible: false, // 控制对话框显示的数据
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        nickName: [{required: true, message: '请输入昵称', trigger: 'blur'}],
        sex: [{required: true, message: '请选择性别', trigger: 'blur'}],
        roleId: [{required: true, message: '请选择角色', trigger: 'blur'}],
        deptId: [{required: true, message: '请选择部门', trigger: 'blur'}],
        tel: [{min: 11, message: '请输入正确的手机号', trigger: 'blur'}]
      },
      title: '', // 对话框标题
      pageSizes: [5, 10, 15, 20],
      limit: 5,
      page: 1,
      total: 30,
      deptList: [],
      roleList: [],
      searchForm: {
        searchParams: {
          username: '',
          state: '',
          deptId: ''
        },
        limit: 5,
        page: 1
      },
      tableData: [],
      multipleSelection: []
    }
  },
  methods: {
    // 获取用户信息列表
    getUserList() {

      userPage(this.searchForm).then(response=>{
        if (response.code===0){
          let {total,tableData}=response.data;
          this.total = total;
          this.tableData = tableData;
        }
      })
    },

    // 重置搜索表单
    resetForm() {
       this.searchForm={
         searchParams: {
           username: '',
           state: '',
           deptId: ''
         },
         limit: 5,
         page: 1
       }
    },
    // 提交搜索请求
    onSubmit() {
      this.searchForm.limit = 5
      this.searchForm.page = 1

      this.getUserList()

    },
    // 批量删除
    batchDelete() {
      if (this.multipleSelection.length===0){
        this.$message.warning("请至少选择一条数据");
        return;
      }
        deleteUser(this.multipleSelection).then(response=>{
          if (response.code===0){
            this.$message.success(response.message)
            this.getUserList()

          }
        })


    },
    // 复选框
    handleSelectionChange(val) {
      this.multipleSelection = val.map(v => v.id)

    },
    // 编辑
    handleEdit(index, row) {
      this.title="编辑"
      this.dialogFormVisible=true
      this.form=row

    },
    // 删除
    handleDelete(index, row) {
     let id= row.id;
     let ids=[];
     ids.push(id)
      deleteUser(ids).then(response=>{
        if (response.code===0){
          this.$message.success(response.message)
          this.getUserList()
        }
      })
    },
    // 改变下拉选
    handleSizeChange(val) {
      this.searchForm.limit=val
      this.getUserList()
    },
    // 改变页码
    handleCurrentChange(val) {
     this.searchForm.page=val
      this.getUserList()
    },
    //显示添加弹出层
    showAddDialog() {
      this.title="新增"
      this.dialogFormVisible=true
    },
    // 修改用户状态
    changeStatus(row) {
      let{state,id}=row;
      changeUserStatus(state,id).then(response=>{
        if (response.code===0){
          this.$message.success(response.message);
          this.getUserList()
        }else if(response.code===110){
          this.getUserList()
        }

      })

    },
    // 添加或编辑用户信息
    addOrEditUser() {

      if (this.title == '新增') {
        this.$refs.formRef.validate(val=>{
             if (val){
               addUser(this.form).then(response=>{
                   if (response.code===0){
                     this.$message.success(response.message);
                     this.dialogFormVisible=false
                     this.getUserList()
                   }
               })
             }
        })

      } else {
        // 发送异步请求 编辑用户信息
        this.$refs.formRef.validate(val=>{
          if (val){ editUser(this.form).then(response=>{
            if (response.code===0){
              this.$message.success(response.message);
              this.dialogFormVisible=false
              this.getUserList()
              location.reload()
            }
          })}

        })
      }


    },
    // 弹窗关闭 清空数据
    clear() {
      this.title = ''
      this.dialogFormVisible = false
      this.form = {
        id: '',
        username: '',
        nickName: '',
        sex: '',
        tel: '',
        city: '',
        deptId: '',
        roleId: ''
      }
      this.$refs.formRef.clearValidate()   // 清空校验信息
    },

    // 重置密码
    resetPassword(index,row) {
      let uid = row.id
      editUserPassword(uid).then(response=>{
        if (response.code===0){
          this.$message.success(response.message)
        }
      })
    }
  },
  created() {
      this.getUserList()
    deptlist().then(response=>{
      this.deptList=response.data.deptList;
    })
    roleList().then(response=>{
      this.roleList=response.data.roleList;
    })
  }

}
</script>

<style scoped>

.box {
  padding: 15px;
}

.search {
  border-bottom: 1px solid #DCDFE6;
}

.batch {
  margin-top: 15px;
  margin-bottom: 25px;
}

.page-nav {
  margin-top: 15px;
  margin-bottom: 30px;
}

.el-button {
  margin-right: 5px;
}
</style>